@import"../../assets/css/reset.css";
@import"../../assets/css/common.css";

//头部独立样式
header {
    border-bottom: 1px solid rgb(185, 207, 239);
    position: relative;
    background-color: #f1f1f1ff;

    .register {
        a {
            color: fff !important;
        }
    }

    nav {
        a {
            color: #000;
        }
    }

    .login {
        a {
            color: #000;
        }
    }
}

// <!-- 粒子插件 -->
.banner {
    background-color: #f1f1f1;
    height: 355px;
    position: relative;

    #mydiv canvas {
        z-index: 100 !important;
        position: absolute !important;
    }

    // // <!-- 粒子插件上面的布局内容 定位在粒子上正中间-->
    .banner-content {
        height: 270px;
        width: 1200px;
        z-index: 500;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;

        // 粒子插件上面左边盒子
        .banner-left {
            text-align: center;
            height: 270px;
            width: 270px;
            background-color: #fff;
            display: flex;
            flex-direction: column;

            div:nth-child(1) {
                width: 100%;
                height: 55%;
                position: relative;

                img {
                    width: 100px;
                }

            }

            div:nth-child(2) {
                position: relative;
                width: 100%;
                height: 45%;
                // background-color: rgb(50, 76, 52);
                align-items: center;
                justify-content: space-around;

                //下边三个小DIV
                div {
                    width: 90px;
                    height: 100%;
                    flex-direction: column;
                    justify-content: center;
                    display: flex;
                    width: 50px;
                    height: 120px;
                    align-items: center;

                    img {
                        margin-bottom: 20px;
                    }

                    p {
                        color: rgb(208, 208, 208);
                    }

                    img {
                        width: 25px;
                    }
                }
            }

        }

        // 粒子插件上面右边盒子
        .banner-reght {
            width: 850px;
            height: 100%;

            .banner-reght-titel {
                b {
                    font-size: 22px;
                    color: #555555;
                }

                span {
                    display: inline-block;
                    padding: 4px 8px;
                    font-size: 12px;
                    color: #00bdff;
                    border: 1px solid #00bdff;
                    border-color: #00bdff;
                    vertical-align: bottom;
                    margin-left: 10px;
                }

            }

            /* <!-- 描述 -->/ */
            .banner-reght-speak {
                span {
                    display: inline-block;
                    margin-right: 25px;
                    color: #f8aa39;
                    margin-top: 15px;
                    margin-bottom: 18px;
                    font-size: 12px;
                    img{
                        margin-right: 8px;
                        vertical-align:middle;
                    }
                }
            }
            /* <!-- 提示 --> */
            .hint{
                color:#6e6e6e;
                font-size: 14px;
            }
            /* <!-- 次数 --> */
            .inblock{
                display: inline-block;
            }
            .time{
                position: relative;
                span:nth-child(1){
                    border-color: #00bdff;
                    color: #00bdff;  
                    // background-image: url(../../assets/imgs/API详情页_17.jpg);
                    img{
                        margin-right: 5px;
                        
                    }
                }
                //动态生成的span次数 后面点击添加类名三角形
                div{
                    .active{
                        background-image: url("../../assets/imgs/select.png");
                        background-repeat: no-repeat;
                        background-position: 49px 6px;
                         border-color: #00bdff;
                         border-color: #00bdff;
                         color: #00bdff;  
                    }
                }
               
                span{
                    display: inline-block;
                    margin-right: 15px;
                    padding: 5px 10px;
                    border: 1px solid #999;
                    font-size: 12px;
                    margin-top: 17px;
                    cursor: pointer;
                    img:nth-child(1){
                        height: 12px;
                    }
                }
                span:nth-child(5){
                    position: absolute;
                    display: block;
                    height: 87px;
                    width: 87px;
                    /* background-color: rgb(35, 23, 23); */
                    top: 24px;
                    left: 0;
                    display: none;
                    img{
                        height: 87px;
                        width: 87px;
                        position: absolute;
                        top: -1px;
                        left: -1px;
                    }
                }
                .one{
                    position: relative;
                }
            }
            /* 扫码二维码显示 */
            .one:hover .five>img{
                display: block !important;
            }
            .five{
                img{
                    position: absolute;
                    display: block;
                    /* height: 50px; */
                    width: 87px;
                    display: none;
                }
            }
            /* 价格 */
            .money{
                margin-top: 15px;
                &>b{
                    color: red;
                    font-size: 18px;
                }
                span{
                    color: #cecece;
                    font-size: 12px;
                }
            }
            /* 立即申请 */
            .but{
                margin-top: 25px;
                background-color: #00bdff;
                border: none;
                padding: 12px 28px;
                color: #fff;font-size: 12px;
                cursor: pointer;
            }
        }

    }
}
//api主体导航栏菜单
.api-nav{
    height:50px;
    width: 100%;
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 60px;
    ul{
      height: 100%;
      line-height: 50px;
      li{
        width: 150px;
        position: relative;
        cursor: pointer;
        //选项卡菜单默认样式
        &.on{
            color: #00bdff;
        }
        
        span{
            display: inline-block;
            position: absolute;
            height: 3px;
            width: 52px;
            background-color: #00bdff;
            top: 46px;
            left: 0px;
            display: none;

             //选项卡默认样式显示
            &.active{
                
                display: block;
            }
        }
      
      }
    }
}
// 选项卡主体
.api-tab-content{
    height: 1400px;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
   
    .api-tab-content-left{
        height: 100%;
        width: 925px;
        // <!-- 左边选项卡主体1API文档 -->
        div{
            display: none;
           
        }
        .active{
            display: block;
        }
        div:nth-child(1){
            background-color: rgb(161, 136, 68);
        }
        div:nth-child(2){
            background-color: rgb(70, 27, 27);
        }
        div:nth-child(3){
            background-color: rgb(62, 167, 130);
        }
        div:nth-child(4){
            background-color: rgb(29, 60, 109);
        }
        // div:nth-child(1),div:nth-child(2),div:nth-child(3),div:nth-child(4){
        //     height: 100%;
        //     width: 100%;
        //     // display: flex !important;
        //     flex-direction: column;
        //     justify-content: space-between;
        //     // background-color: rgb(211, 219, 159);
        //     .one{
        //         width: 100%;
        //         height: 230px;
        //         display: flex;
        //         flex-direction: column;
        //         justify-content: space-between;
        //         p{
        //             color: rgb(201, 201, 201);
        //             span{
        //                 color: rgb(85, 85, 85);
        //             }
        //         }
               
        //         button{
        //             width: 200px;
        //             height: 50px;
        //             background-color: rgb(0, 189, 255);
        //             border: none;
        //             color: #fff;
        //         }
        //     }
        //     // <!-- 请求参数说明 -->
        //     .two{
        //         width: 100%;
        //         height: 245px;
                
        //         // background-color: rgb(112, 44, 44);
        //         position: relative;
        //         p{
        //             position: absolute;
        //             top: -50px;
        //             left: 0;
        //             font-weight: bolder;
        //            span:nth-child(1){
        //             display: inline-block;
        //             margin-right: 10px;
        //             width: 4px;
        //             height: 17px;
        //             background-color: rgb(7, 191, 255);
                    
        //             }
        //         }
        //         table{
        //             height: 100%;
        //             width: 100%;
        //             tr:nth-child(1){
        //                 background-color: rgb(251, 251, 251);
        //             }
        //             tr{
        //                 line-height: 50px;
        //                 border: 1px solid #ccc;
        //                 td{
        //                     height: 35px !important;
        //                 }
        //             }
        //             tr{
        //                 td:nth-child(1){
        //                     text-indent: 24px;
        //                 }
        //             }
        //         }
        //     }
        //     // <!-- 返回参数说明 -->
        //     div:nth-child(3){
        //         height: 340px;
        //         width: 100%;
        //         position: relative;
        //         p{
        //             position: absolute;
        //             top: -50px;
        //             left: 0;
        //             font-weight: bolder;
        //            span:nth-child(1){
        //             display: inline-block;
        //             margin-right: 10px;
        //             width: 4px;
        //             height: 17px;
        //             background-color: rgb(7, 191, 255);
                    
        //             }
        //         }
        //         table{
        //             height: 100%;
        //             width: 100%;
        //             color: rgb(166, 166, 166);
        //             tr:nth-child(1){
        //                 background-color: rgb(251, 251, 251);
        //             }
        //             tr{
        //                 line-height: 50px;
        //                 border: 1px solid #ccc;
        //                 td{
        //                     height: 35px !important;
        //                 }
        //             }
        //             tr{
        //                 td:nth-child(1){
        //                     text-indent: 24px;
        //                 }
        //             }
        //         }

        //     }
        //     // <!-- json返回实例 -->
        //     div:nth-child(4){
        //         height: 336px;
        //         width: 100%;
        //         background-color: rgb(250, 250, 250);
        //         position: relative;
        //         p{
        //             position: absolute;
        //             top: -50px;
        //             left: 0;
        //             span:nth-child(1){
        //             display: inline-block;
        //             margin-right: 10px;
        //             width: 4px;
        //             height: 17px;
        //             background-color: rgb(7, 191, 255);
        //             }
        //                 span:nth-child(2){
        //                 font-weight: bolder;
        //             }
        //             button{
        //                 border: none;
        //                 height: 35px;
        //                 width: 170px;
        //                 background-color: #1271ef;
        //                 border-radius: 10px;
        //                 font-size: 14px;
        //                 color: #fff;
        //             }
        //         }
        //         }
              


        // }
       
       
        // // <!-- 左边选项卡主体2 -->
        // // <!-- 左边选项卡主体3 -->
        // // <!-- 左边选项卡主体4 -->
       
        

    }
    .api-tab-content-right{
        width: 200px;
        height: 800px;
        background-color: rgb(51, 142, 95);
    }
}
